<template>
  <div class="op-bar">
    <type-filter :now-type="allType" @change="handleAllTypeChange" />
    <div class="search-bar" @click="handleSearch">
      <img src="../assets/search.png" />
      <span> 搜索 </span>
    </div>
  </div>
  <div class="content">
    <van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
      <van-list v-model:loading="loading" :finished="finished" @load="loadData">
        <record-item
          v-for="item in list"
          :key="item.id"
          :item="item"
          @fav="handleFavChange"
          @view="handleItemView"
        />
      </van-list>
      <van-empty v-if="!list.length && !loading" description="没有视频信息" />
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import usePage from '@/hooks/usePage.ts'
import VidServe from '@/api/vid.ts'
import RecordItem from './recordItem.vue'
import TypeFilter from './typeFilter.vue'

const { list, loading, finished, query, reset, refreshing, refresh } = usePage(VidServe.list)

const allType = ref(null)
const handleAllTypeChange = type => {
  allType.value = type
  reset()
  loadData()
}

const handleRefresh = () => {
  return refresh({
    type: allType.value
  })
}

const loadData = () => {
  return query({
    type: allType.value
  })
}

const emit = defineEmits(['view', 'fav'])

const handleItemView = (item: TypeVidItem) => {
  emit('view', item)
}

const handleFavChange =(item: TypeVidItem) => {
  emit('fav', item)
  item.isFocus = item.isFocus == 0 ? 1 : 0
}

const router = useRouter()
const handleSearch = () => {
  router.push('/zone/video/search')
}
</script>

<style scoped></style>
